<template>
  <div class="app-container">
      <search-bar :search="searchParams" @on-search="search">
        <el-form :model="searchParams" inline>
            <el-row>
              <el-col :span="8">
                <el-form-item label="单位名称">
                    <el-input  clearable v-model="searchParams.customerName" placeholder="客户名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="关联单号">
                    <el-input clearable v-model="searchParams.contractNo" placeholder="关联号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="回款状态" prop="status">
                    <el-select clearable  v-model="searchParams.status" placeholder="请选择">
                        <el-option label="未完成" :value="0"></el-option>
                        <el-option label="已完成" :value="1"></el-option>
                    </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="回款类型" prop="repaymentType">
                    <el-select  clearable v-model="searchParams.receivableType" placeholder="请选择">
                    <el-option v-for="(item,index) in getReceivableType" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-form-item label="回款商定时间" >
              <Date-picker align="left"   v-model="searchParams" />
            </el-form-item>
            </el-row>
        </el-form>
      </search-bar>
    <div>
       <el-button type="success" @click="toCreate" icon="wp wp-icon-save">新建回款</el-button>
    </div>
    <page-table
        :WP_MaxHeight="280"
        :WP_CurrentPage="currentPage"
        :WP_PageSize="pageSize"
        :WP_List="list"
        :WP_TotalRow="totalRow"
        :WP_Loading="loading"
      >
      <el-table-column label="回款编号" width="120" prop="receivableCode">
      </el-table-column>
      <el-table-column label="回款单位"  prop="relationType" :formatter="formatterRelationType"></el-table-column>
      <el-table-column label="单位名称" width="120" prop="customerName" show-overflow-tooltip></el-table-column>
      <el-table-column label="关联单号" width="120" prop="contractNo">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.contractNo" :content="tooltipContent(scope.row)" placement="top">
                 <span> {{scope.row.contractNo}}</span>
          </el-tooltip>
            <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="回款类型" prop="receivableType" :formatter="formatterReceivableType"></el-table-column>
      <el-table-column label="回款金额" prop="repaymentAmount"></el-table-column>
      <el-table-column label="回款方式" prop="repaymentTypeName"></el-table-column>
      <el-table-column label="回款商定日期" width="120" prop="repaymentDate">
        <template slot-scope="scope">
            <span>{{ scope.row.repaymentDate | FormatDate('yyyy-MM-dd')}}</span>
        </template>
      </el-table-column>
      <el-table-column label="回款完成日期" width="120" prop="repaymentCompletionDate">
        <template slot-scope="scope">
            <span>{{ scope.row.repaymentCompletionDate | FormatDate('yyyy-MM-dd') ||'--' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="回款状态" prop="status" :formatter="formatterStatus"></el-table-column>
      <el-table-column label="备注" prop="remark" width="100"  show-overflow-tooltip></el-table-column>
      <el-table-column label="创建时间" width="150" prop="createTime"></el-table-column>
      <el-table-column label="更新时间" width="150" prop="updateTime"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="160">
        <template  slot-scope="scope">
          <el-button type="warning" size="mini"  @click="toEdit(scope.row)">编 辑</el-button>
          <el-button type="danger" size="mini"  @click="toDelete(scope.row)">删 除</el-button>
        </template>
      </el-table-column>
      </page-table>
      <el-dialog  top="2vh" width="70%" :title="title" :visible.sync="visible">
          <el-form :model="receivableInfo" label-width="100px" :rules="rules" ref="receivableRef">
            <el-row>
              <el-col :span="12">
                <el-form-item label="回款单位" prop="relationType" :rules="{ required: true, trigger: 'blur', message: '不能为空' }">
                  <el-select class="wp-form-280" :disabled="receivableInfo.sourceType==1||receivableInfo.id||!canModify" @change="selectRelationType" v-model="receivableInfo.relationType" placeholder="请选择">
                    <el-option v-for="(item,index) in relationTypes" :key="index" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单位名称" prop="customerName" :rules="{ required: true, trigger: 'blur', message: '不能为空' }">
                <SupplierSelect  v-if="receivableInfo.relationType===0" :disabled="receivableInfo.sourceType==1||receivableInfo.id||!canModify" @change="selectSupplier" v-model="receivableInfo.customerCode" :name.sync="receivableInfo.customerName"/>
                <PopoverSearch  ref="customerNameRef" v-else-if="receivableInfo.relationType===2"  :disabled="receivableInfo.sourceType==1||receivableInfo.id||!canModify" @hide="customerHide" v-model="receivableInfo.customerCode" :name.sync="receivableInfo.customerName"/>
                <el-input  v-else class="wp-form-280" :disabled="receivableInfo.sourceType==1||receivableInfo.id||!canModify" v-model="receivableInfo.customerName" placeholder="单位名称"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="关联单号" prop="contractNo" :rules="{ required: receivableInfo.relationType===2, trigger: 'blur', message: '不能为空' }">
                    <PopoverSearch   v-if="receivableInfo.relationType===2" :disabled="!contractCanChange||receivableInfo.sourceType==1||receivableInfo.id||!canModify"   ref="contractRef" v-model="receivableInfo.contractNo" :params="queryContractParams"   clearable  type='contract' placeholder="+添加合同"   lableKey="contractNo" valueKey="contractNo"/>
                    <el-input v-else  clearable :disabled="receivableInfo.sourceType==1||!canModify" class="wp-form-280" v-model="receivableInfo.contractNo" placeholder="填写关联单据号，例如：退款单号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="回款单号">
                    <el-input clearable :readonly="!canModify" class="wp-form-280" v-model="receivableInfo.receivableNo" placeholder="填写真实的回款单号"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="回款类型" prop="receivableType">
                    <el-select :disabled="receivableInfo.sourceType==1||!canModify"  class="wp-form-280" v-model="receivableInfo.receivableType" placeholder="请选择">
                    <el-option v-for="(item,index) in getReceivableType" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商定日期" prop="repaymentDate">
                    <el-date-picker  :readonly="!canModify" value-format="yyyy-MM-dd HH:mm:ss" style="width:280px" type="date" v-model="receivableInfo.repaymentDate" placeholder="回款商定日期"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="回款金额" prop="repaymentAmount">
                    <el-input clearable :readonly="!canModify" class="wp-form-280" v-model="receivableInfo.repaymentAmount" placeholder="回款单号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="回款方式" prop="repaymentType">
                    <el-select  :disabled="!canModify" class="wp-form-280" v-model="receivableInfo.repaymentType" placeholder="请选择">
                    <el-option v-for="(item,index) in paymentTypes" :key="index" :label="item.bizName" :value="item.bizValue"></el-option>
                    </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="回款状态" prop="status">
                    <el-select  :disabled="!canModify" class="wp-form-280" @change="selectStatus" v-model="receivableInfo.status" placeholder="请选择">
                        <el-option label="未完成" :value="0"></el-option>
                        <el-option label="已完成" :value="1"></el-option>
                    </el-select>
                </el-form-item>
              </el-col>
               <el-col :span="12">
                <el-form-item label="备注" prop="remark">
                    <el-input :readonly="!canModify" class="wp-form-280" type="textarea" v-model="receivableInfo.remark" placeholder="备注"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
             <el-col :span="12" v-if="receivableInfo.status==1">
                <el-form-item label="完成日期" prop="repaymentCompletionDate" :rules="{ required: true, trigger: 'blur', message: '不能为空' }">
                    <el-date-picker :readonly="!canModify"  value-format="yyyy-MM-dd HH:mm:ss" style="width:280px" type="date" v-model="receivableInfo.repaymentCompletionDate" placeholder="回款完成日期"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div style="margin-top:10px;text-align:center;">
              <el-button type="" @click="visible=false">取 消</el-button>
              <el-button type="success" @click="save" v-if="canModify">保 存</el-button>
          </div>
      </el-dialog>
  </div>
</template>

<script>
import SearchBar from '@/components/SearchBar'
import PageTable from '@/components/PageTable'
import PopoverSearch from '@/views/components/popoverSearch'
import SupplierSelect from '@/views/eims/components/SupplierSelect'
import DatePicker from '@/components/DatePicker'
import {mapGetters} from 'vuex'
import Mixins from './mixins'
export default {
  components: {SearchBar, DatePicker, PageTable, PopoverSearch, SupplierSelect},
  mixins: [Mixins],
  data () {
    return {
      id: 'receivable',
      canModify: false,
      visible: false,
      contractCanChange: false,
      title: '',
      receivableInfo: {},
      queryContractParams: {customerCode: '-1'},
      rules: {
        receivableType: [{required: true, message: '不能为空', trigger: 'blur'}],
        repaymentType: [{required: true, message: '不能为空', trigger: 'blur'}],
        repaymentDate: [{required: true, message: '不能为空', trigger: 'blur'}],
        status: [{required: true, message: '不能为空', trigger: 'blur'}],
        repaymentAmount: [{required: true, message: '不能为空', trigger: 'blur'}]
      }
    }
  },
  computed: {
    ...mapGetters([
      'paymentTypes'
    ]),
    relationTypes () {
      return this.getReceivableRelationTypes()
    },
    getReceivableType () {
      return this.getReceivableTypes()
    }
  },
  methods: {
    customerHide (data) {
      this.queryContractParams.customerCode = data.customerCode || '-1'
      if (data && Object.keys(data).length > 0) {
        this.receivableInfo.customerName = data.customerName
        this.receivableInfo.customerCode = data.customerCode
        this.contractCanChange = true
        this.$refs.contractRef.inputClear()
      } else {
        this.receivableInfo.customerName = null
        this.receivableInfo.customerCode = null
        this.contractCanChange = false
      }
    },
    tooltipContent (row) {
      if (row.relationType === 0) {
        return `退款单：${row.contractNo}`
      } else if (row.relationType === 2) {
        return `合同单：${row.contractNo}`
      }
      return row.contractNo
    },
    toCreate () {
      this.title = '新建回款单'
      this.visible = true
      this.canModify = true
      if (this.$refs.customerNameRef) {
        this.$refs.customerNameRef.inputClear()
      }
      if (this.$refs.contractRef) {
        this.$refs.contractRef.inputClear()
      }
      this.receivableInfo = {relationType: 2}
    },
    selectSupplier (val) {
    },
    toEdit (row) {
      this.title = '编辑回款单'
      this.visible = true
      this.canModify = row.status === 0
      this.receivableInfo = {...row}
    },
    selectStatus (val) {
      this.$set(this.receivableInfo, 'repaymentCompletionDate', null)
    },
    toDelete (row) {
      this.$msgBox.confirm('确认删除回款单【' + row.receivableCode + '】', () => {
        this.requestOption('deleteReceivableInfo', row.receivableCode, res => {
          if (res.code === 0) {
            this.initPageList()
          }
        })
      })
    },
    selectRelationType (val) {
      this.$set(this.receivableInfo, 'customerCode', null)
      this.$set(this.receivableInfo, 'customerName', null)
      this.$set(this.receivableInfo, 'contractNo', null)
    },
    formatterRelationType (row, column, cellValue, index) {
      const relationTypeInfo = this.relationTypes.find(item => {
        return item.value === cellValue
      })
      return relationTypeInfo && relationTypeInfo.label ? relationTypeInfo.label : cellValue
    },
    formatterReceivableType (row, column, cellValue, index) {
      if (this.getReceivableType && this.getReceivableType.length > 0) {
        const receivableType = this.getReceivableType.find((item) => {
          if (cellValue === item.value) {
            return item
          }
        })
        return receivableType && receivableType !== null ? receivableType.label : cellValue
      }
      return cellValue
    },
    formatterStatus (row, column, cellValue, index) {
      return cellValue && cellValue === 1 ? '已完成' : '未完成'
    },
    save () {
      this.$refs.receivableRef.validate(validate => {
        if (validate) {
          if (this.receivableInfo && this.receivableInfo.receivableCode) {
            this.requestOption('updateReceivableInfo', this.receivableInfo, res => {
              this.visible = false
              this.initPageList()
            })
          } else {
            this.requestOption('saveReceivableInfo', this.receivableInfo, res => {
              this.visible = false
              this.initPageList()
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
